<template>
  <div class="module-manager">
    <el-transfer
      style="text-align: left; display: inline-block"
      v-model="hasChooseModuleList"
      :titles="['可选模块', '模块配置']"
      @change="handleChange"
      :data="ModuleList"
      :props="{
        key: 'id',
        label: 'label'
      }"
    >
    </el-transfer>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue'
import { useStore } from '@/render/store/index'

export default defineComponent({
  props: {
    arVersion: {
      type: String,
      default: '4.3.1'
    },
    projectName: {
      type: String,
      default: ''
    }
  },
  emits: ['getProjectModules', 'updateProjectModules'],
  setup(props, { emit }) {
    const store = useStore()
    const hasChooseModuleList = ref()
    const ModuleList = ref([])
    const handleChange = () => {
      submitProjectModules()
    }
    const submitProjectModules = () => {
      if (props.projectName) {
        emit('updateProjectModules', hasChooseModuleList.value)
      } else {
        emit('getProjectModules', hasChooseModuleList.value)
      }
    }

    onMounted(async () => {
      ModuleList.value = await store.dispatch(
        'env/loadModules',
        props.arVersion
      )

      if (props.projectName) {
        //
        const projectModules = await store.dispatch(
          'projects/loadProjectModule',
          props.projectName
        )
        hasChooseModuleList.value = projectModules?.map(
          (item: any) => item.moduleId
        )
      }
    })
    return { hasChooseModuleList, ModuleList, handleChange }
  }
})
</script>

<style scoped lang="less">
.module-manager {
  ::v-deep .el-transfer {
    display: flex !important;
  }
  ::v-deep .el-transfer-panel {
    width: 45%;
  }
  ::v-deep .el-transfer__buttons {
    width: 10%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    .el-button {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 50px;
      height: 40px;
    }
    .el-button + .el-button {
      margin-left: 0;
      margin-top: 10px;
    }
  }
}
</style>
